<div class="container market">
    <div class="row">
        <div class="col-md-2">
            <div class="category left">
                <ul class="category-list list-unstyled">
                    <li class="category-item" *ngFor="let item of categoryList" [class.active]="item==currentCate" (click)="changeCategory(item)">
                        {{categoryDetail[item]?.CategoryDisplay}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-10">
            <div class="card-box">
                <div class="card-header">
                    <h4 class="card-title">现货行情</h4>
                </div>
                <div class="card-content">
                    <table class="table tabel-no-border">
                        <thead>
                            <tr>
                                <th>品种</th>
                                <th>最新价</th>
                                <th>涨跌</th>
                                <th>涨跌幅</th>
                                <th>开盘价</th>
                                <th>昨收价</th>
                                <th>最高价</th>
                                <th>最低价</th>
                                <th>加自选</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item of categoryDetail[currentCate]?.list">
                                <td>
                                    <!-- <a [routerLink]="['/index/market', item.Symbol]">{{item.SymbolDisplay}}</a> -->
                                    <a [routerLink]="['/trade', item.Symbol]">{{item.SymbolDisplay}}</a>
                                </td>
                                <td>{{item.quote ? item.quote.CurrentPrice: '-'}}</td>
                                <td [ngClass]="{'td-mutil': item.quote?.floating < 0, 'td-add': item.quote?.floating > 0}">{{item.quote ? (item.quote.floating ? (item.quote.floating).toFixed(2) : '-' ): '-'}}</td>
                                <td [ngClass]="{'td-mutil': item.quote?.percent < 0, 'td-add': item.quote?.percent > 0}">{{item.quote ? (item.quote.percent ? (item.quote.percent).toFixed(2) : '-' ): '-'}}</td>
                                <td>{{item.quote ? item.quote.DayOpen: '-'}}</td>
                                <td>{{item.quote ? item.quote.YesterdayClose: '-'}}</td>
                                <td>{{item.quote ? item.quote.DayHigh: '-'}}</td>
                                <td>{{item.quote ? item.quote.DayLow: '-'}}</td>
                                <td>
                                    <i class="glyphicon glyphicon-plus operate-td"></i>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>